
const { resolve } = require("path")
const HTMLWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: "./index.js",
    output: {
        filename: "./bundle.js",
        path: resolve(__dirname, "build")
    },
    module: {
        rules: [
            // loader
            {
                test: /\.less$/,
                // 需要多个loader的时候 使用use 单个的时候使用loader
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ]
            },
            {
                // 默认处理不了html中的img连接 <img src="./vue.png" />
                test: /\.(jpg|png|gif)$/,
                // 需要两个loader url-loader 和 file-loader  其中url-loader依赖于file-loader
                loader: "url-loader",
                options: {
                    // 图片大小小于8kb，就会被base64处理
                    // 优点：直接当作字符串使用，可以减少请求的数量 
                    // 缺点：图片体积会更大
                    limit: 8 * 1024,
                    // 当图片大于8kb的时候，图片不会转换成了base64，而使用es6的模块化解析，但是html-loader引入图片是commonjs,这两者有冲突
                    // 因此需要关闭url-loader的es6模块化
                    esMoudle: false,
                    // [hash:10] 去图片hash名称的前10位
                    // .[ext] 取文件原来的扩展名
                    name: "[hash:10].[ext]"
                }
            },{
                test: /\.html$/,
                // html-loader 处理html文件中的img图片 （负责引入img 从而使得能够被url-loader处理）
                loader: "html-loader"
            }
        ]
    },
    plugins: [
        new HTMLWebpackPlugin({
            template: "./index.html"
        })
    ],
    mode: "development"
}